<template>
  <div class="course-item" @click="toCourseDetail($event)">
      <div class="course-img" v-bind:style="{backgroundImage:'url('+thumb+')'}"></div>
      <div class="course-content">
          <div class="course-name">{{name}}</div>
          <div class="course-desc" v-if="type !== 'camp'">{{desc}}</div>
          <div class="course-desc" v-if="type === 'camp'">共&nbsp;{{course_period}}&nbsp;课时</div>
          <span class="course-detail">
            <label class="course-time" v-if="type === 'camp'">{{start_time}}到{{end_time}}</label>
            {{(price ? '¥&nbsp;' + price : '') + (type === 'person' ? '&nbsp;/&nbsp;课时' : '')}}
            </span>
      </div>
      <!-- 向右的三角形 -->
      <div class="camp" v-if="type==='camp'">
          <span>团</span>
      </div>
      <div class="camp-experience" v-if="type === 'person' && experience > 0">
          <span>体验</span>
      </div>
      <div class="course-appoint" slot="footer">
          <van-button v-bind:class="{ course_button_disable: button_disabled }" @click="appoint" class="course-button" size="mini">{{button_text}}</van-button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'course-item',
  comments: 'course-item',
  props: {
    courseId: Number,
    status: Number,
    hasBuy: Number,
    thumb: String,
    name: String,
    desc: String,
    date: String,
    s_time: Number,
    e_time: Number,
    price: Number,
    type: String,
    experience: Number,
    course_period: Number
  },
  data () {
    return {
      button_text: this.status > 3 ? '已结束' : (this.hasBuy > 0) ? '已预约' : '预约',
      button_disabled: this.status > 3 || this.hasBuy > 0,
      start_time: this.$date(this.s_time).substring(0, 10),
      end_time: this.$date(this.e_time).substring(0, 10)
    }
  },
  watch: {
    over (val) {
      this.over = val
    }
  },
  methods: {
    appoint: function (e) {
      if (this.over) {
        this.$toast('课程已结束，请下次再预约~')
        return
      }
      if (e.target.tagName === 'BUTTON') {
        if (this.type === 'person') {
          // 进入私教
          this.$router.push({
            name: 'course_detail_person',
            params: {
              course_id: this.courseId
            }
          })
        } else {
          // 进入团操
          this.$router.push({
            name: 'course_detail',
            params: {
              course_id: this.courseId
            }
          })
        }
      }
      this.isAppointment = !this.isAppointment
      this.button_text = this.isAppointment ? '已预约' : '预约'
    },
    // 进入课程详细
    toCourseDetail: function (e) {
      if (e.target.tagName !== 'BUTTON') {
        if (this.type === 'person') {
          // 进入私教
          this.$router.push({
            name: 'course_detail_person',
            params: {
              course_id: this.courseId
            }
          })
        } else {
          // 进入团操
          this.$router.push({
            name: 'course_detail',
            params: {
              course_id: this.courseId
            }
          })
        }
      }
    }
  }
}
</script>
<style lang="postcss" scoped>
.course-item{
    height: 100px;
    width: 100%;
    background-color: #333;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 4px;
}
.course-img{
    height: 80px;
    width: 80px;
    position: absolute;
    border-radius: 50%;
    background-size: 100%;
    left: 5px;
    top: 10%;
}
.course-content{
    position: absolute;
    top: 0px;
    left: 90px;
    text-align: left;
    height: 100%;
    width: 52%;
    color: #f8f8f8;
}
.course-name{
    margin-top: 10px;
    font-size: 1rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.course-desc{
    font-size: 0.8rem;
    text-align: left;
    margin-top: 8px;
    overflow:hidden;
    //height: 2.4rem;
    text-overflow:ellipsis;
    white-space:nowrap;
    //display: -webkit-box;
    //-webkit-box-orient: vertical;
    //-webkit-line-clamp: 2;
}
.course-detail{
    display: block;
    font-size: 0.8rem;
}
.course-time{
    color:yellow;
}
.course-appoint{
    position: absolute;
    right: 5px;
    bottom: 42%;
    color: yellow;
}
.camp{
    width: 0;
    height: 0;
    border-top: 30px solid yellow;
    border-left: 30px solid transparent;
    position: absolute;
    right: 0px;
}
.camp-experience{
  width: 0;
    height: 0;
    border-top: 30px solid yellow;
    border-left: 30px solid transparent;
    position: absolute;
    right: 0px;
}
.camp-experience span{
    position: absolute;
    top: -28px;
    left: -24px;
    width: 24px;
    font-size: 0.5rem;
    transform: rotate(45deg);
}
.camp span{
    position: absolute;
    top: -30px;
    left: -15px;
    font-size: 0.8rem;
    transform: rotate(45deg);
}
.course-button{
    color: #fff;
    background-color: #333;
    border: 1px solid yellow;
}
.course_button_disable{
    color: #fff;
    background-color: #666;
    border: 1px solid #f8f8f8;
}
</style>
